<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><spring:message code="title"/> </title>
    <meta name="Keywords" content="南通大学，通大">
    <meta name="Description" content="南通大学，通大">


</head>
<body>
<div id="particles">

    <div class="intro">
        <div class="container">
            <div class="row" style="padding: 20px">
                <div class="col-md-3 col-centered tac">
                    <h3 style="color:black"><spring:message code="register-title"/> </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-sm-2"></div>
                <div class="col-md-4 col-sm-4">
                    <form method="post" id="form2"
                          action="${pageContext.request.contextPath}/user/register${style}"
                          class="nice-validator n-default">
                        <div class="form-group">
                            <input type="text" class="form-control" id="nickname" name="nickname"
                                   placeholder="<spring:message code="placeholder.nickname"/>" required="required" autocomplete="off">
                            <div class="validator-tips nickname-null" hidden>
                                <div class="error">
                                    <spring:message code="nickname-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="email" name="email"
                                   placeholder="<spring:message code="placeholder.email"/> " required="required" autocomplete="off">
                            <div class="validator-tips">
                                <div class="error  email-null"  hidden>
                                    <spring:message code="email-null"/>
                                </div>
                                <div class="error  email-error"  hidden>
                                    <spring:message code="email-error"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="rinpsipd" name="rinpsipd"
                                   placeholder="<spring:message code="placeholder.rinpsipd"/> " autocomplete="off" required="required" >
                            <div class="validator-tips rinpsipd-null" hidden>
                                <div class="error">
                                    <spring:message code="rinpsipd-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="qq" name="qq"
                                   placeholder="<spring:message code="placeholder.qq"/>" autocomplete="off" >
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="weixin" name="weixin"
                                   placeholder="<spring:message code="placeholder.weixin"/> " autocomplete="off" >
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="phone" name="phone"
                                   placeholder="<spring:message code="placeholder.phone"/> " autocomplete="off" >
                            <div class="validator-tips phone-error" hidden>
                                <div class="error">
                                    <spring:message code="phone-error"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <input type="text" class="form-control" id="xh" name="xh"
                                   placeholder="<spring:message code="placeholder.xh"/>" required="required">
                            <div class="validator-tips xh-null" hidden>
                                <div class="error">
                                    <spring:message code="xh-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="sfzh" name="sfzh"
                                   placeholder="<spring:message code="placeholder.sfzh"/>" required="required" >
                            <div class="validator-tips sfzh-null" hidden>
                                <div class="error">
                                    <spring:message code="sfzh-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="pwd" name="pwd"
                                   placeholder="<spring:message code="placeholder.pwd"/>" autocomplete="off" >
                            <div class="validator-tips pwd-null" hidden>
                                <div class="error">
                                    <spring:message code="pwd-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <table width="100%">
                                <tr>
                                    <td><input type="text" class="form-control" id="yzm"
                                               name="yzm" placeholder="<spring:message code="placeholder.yzm"/>" required="required">
                                    </td>
                                    <td><img alt="<spring:message code="alt"/>" style="width: 100%;height: 100%"
                                             src="${pageContext.request.contextPath}/user/getYzm.ztc"
                                             onclick="reloadImg(this)"></td>
                                </tr>
                            </table>
                            <div class="validator-tips yzm-null" hidden>
                                <div class="error">
                                    <spring:message code="yzm-null"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group yz-tips validator-tips" hidden>
                            <table width="100%">
                                <tr>
                                    <td class="error">
                                        <spring:message code="tip"/>
                                    </td>
                                    <td>
                                        <img src="${pageContext.request.contextPath}/static/img/load.gif" alt="<spring:message code="tip"/>">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="form-group validator-tips">
                            <div class="error user-exist" hidden>
                                <spring:message code="user-exist"/>
                            </div>
                            <div class="error user-error" hidden>
                                <spring:message code="user-error"/>
                            </div>
                        </div>
                </div>
                <div class="col-md-2 col-sm-2"></div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-8 col-centered">
                    <div class="checkbox">
                        <label> <input type="checkbox" id="checkbox"> <spring:message code="agreement"/></label>
                        <a id="userAgreement" style="text-decoration: none"> <spring:message code="userAgreement"/></a>
                        <div class="validator-tips userAgreement-null" hidden>
                            <div class="error">
                                <spring:message code="userAgreement-null"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" id="submit_button"
                               class="form-control btn btn-primary btn-current"
                               value="<spring:message code="register"/> ">
                    </div>
                    <div class="form-group">
                        <a href="#" class="form-control btn btn-default btn-current"><spring:message code="cancel"/></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1"
             style="text-align: left" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                        <h4 class="modal-title"><spring:message code="userAgreement"/> </h4>
                    </div>
                    <div class="modal-body" id="agreementContent">
                        <h3>
                            <spring:message code="content"/>
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function reloadImg(t) {
        t.src = "${pageContext.request.contextPath}/user/getYzm.ztc?a="
                + Math.random();
    }

    $('#userAgreement').click(function() {
        $('#myModal').modal();
    });

    $(document).ready(function() {
        $('#particles').particleground({
            dotColor : 'rgba(52, 152, 219, 0.36)',
            lineColor : 'rgba(52, 152, 219, 0.86)',
            density : 130000,
            proximity : 500,
            lineWidth : 0.2
        });


        $('#submit_button').click(function() {
            var nickname=$('#nickname').val().trim();
            var email=$('#email').val().trim();
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            var rinpsipd=$('#rinpsipd').val().trim();
            var phone=$('#phone').val().trim();
            var mobile=/^((13[0-9]{1})|159|153)+\d{8}$/;
            if(nickname==''){
                $('.nickname-null').show();
                return;
            }else
                $('.nickname-null').hide();

            if(email==''){
                $('.email-null').show();
                return;
            }else
                $('.email-null').hide();

            if(!myreg.test(email)){
                $('.email-error').show();
                return;
            }else
                $('.email-error').hide();

            if(rinpsipd=='') {
                $('.rinpsipd-null').show();
                return;
            }else
                $('.rinpsipd-null').hide();

            if(phone!='') {
                if (!mobile.test(phone)) {
                    $('.phone-error').show();
                    return;
                } else
                    $('.phone-error').hide();
            }


            var xh=$('#xh').val().trim();
            var sfzh=$('#sfzh').val().trim();
            var pwd=$('#pwd').val().trim();
            var yzm=$('#yzm').val().trim();
            if(xh==''){
                $('.xh-null').show();
                return;
            }else
                $('.xh-null').hide();

            if(sfzh==''){
                $('.sfzh-null').show();
                return;
            }else
                $('.sfzh-null').hide();

            if(pwd==''){
                $('.pwd-null').show();
                return;
            }else
                $('.pwd-null').hide();

            if(yzm==''){
                $('.yzm-null').show();
                return;
            }else
                $('.yzm-null').hide();

            if(!$('#checkbox').is(':checked')){
                $('.userAgreement-null').show();
                return;
            }else
                $('.userAgreement-null').hide();

            $('.yz-tips').show();
            $('.user-exist').hide();
            $('.user-error').hide();

            $.post("${pageContext.request.contextPath}/user/testUser.ztc", {
                xh : xh,
                sfzh : sfzh,
                pwd : pwd,
                yzm : yzm
            }, function(data){
                $('.yz-tips').hide();
                if(data.result=='0000'){
                    $('#form2').submit();
                }else if(data.result=='0001'){
                    $('.user-exist').show();
                }else if(data.result=='0002'){
                    $('.user-error').show();
                }
            });
        });
    });
</script>
</body>
</html>
